Merged
Conversation
- make inputs hidden - respect reduced motion for confetti and jiggle - visually hidden headings - visually hidden text for letter state - remove aria-selected - increase color contrast on selected tile
🦋 Changeset detectedLatest commit: 9ca222e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dummdidumm
approved these changes
Dec 6, 2022
Member
dummdidumm
left a comment
dummdidumm
left a comment
There was a problem hiding this comment.
Thank you! To me the new color is actually more pleasant to the eyes, so +1 on that change from me
Rich-Harris
approved these changes
Dec 8, 2022
This was referenced Dec 8, 2022
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR makes some a11y improvements to the Sverdle demo.
use hidden inputs - previously, each letter guess was its own unlabeled input. There wasn't a great way to label them, and they weren't inputs you could directly interact with, so I changed them to hidden inputs instead and used
<div>s for the tiles. This resolves 30 Axe errors.respect reduced motion for confetti and jiggle animation.
add visually hidden headings. This resolves an Axe error (no h1) and also gives landmarks so assistive tech users can easily navigate between rows.
add visually hidden text for letter state - previously, whether a letter was a correct guess or not was solely conveyed visually. This adds visually hidden text to identify a letter's state to non-sighted users. The description is taken from the NYT Wordle's hidden text (present/absent/correct/empty)
remove aria-selected - this ARIA attribute is only valid on gridcell, option, row and tab roles and was not being used on elements with those roles, so I removed it.
increase color contrast on selected tile - possibly controversial. The previous color used for a "correct" letter had really poor contrast (2.3). The new color gets to 4.6, and I think it looks okay? The variable I changed is only used for Sverdle right now.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. All changesets should bepatchuntil SvelteKit 1.0